<template>
    <!-- 滑动导航栏 -->
    <view class="tab">
        <!-- 左部导航 -->
        <scroll-view scroll-x class="tab-scroll">
            <view class="tab-container" :style="{ width: tabWidth + '%' }" v-for="(item, index) in tabBars"
                :key="item.id" :id="'tab' + index">
                <view class="tab-item" :class="{ active: currentIndex == index }" @click="changeIndex(index)">
                    {{ item.name }}
                </view>
            </view>
        </scroll-view>
        <!-- 右侧工具栏 -->
        <view class="tab-tool" v-if="toolList.length > 0">
            <text class="tab-tool-item" v-for="(item, index) in toolList" :key="index" :class="`iconfont ${item.icon}`"
                @tap="item.func">
            </text>
        </view>
    </view>

    <!-- 内容 -->
    <swiper :current="currentIndex" @change="changeTab" :style="'height:' + scrollH + 'px'">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
            <scroll-view :scroll-y="true" :refresher-enabled="refresherEnabled" :refresher-triggered="trigger"
                @refresherpulling="onPulling" :style="'height:' + scrollH + 'px;'">
                <slot name="swiper-item" :item="item" :index="index"></slot>
            </scroll-view>
        </swiper-item>
    </swiper>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
let props = defineProps({
    //tab栏数组
    tabBars: {
        type: Array<any>,
        default: []
    },
    //tab栏下方页面数据数组
    swiperList: {
        type: Array<any>,
        default: []
    },
    //当前页面下标
    currentIndex: {
        type: Number,
        default: 0
    },
    //tab栏宽度
    width: {
        type: Number,
        default: 0
    },
    //tab栏下方高度
    scrollH: {
        type: Number,
        default: 0
    },
    // 工具栏
    toolList: {
        type: Array<any>,
        default: []
    },
    refresherEnabled: {
        type: Boolean,
        default: false
    },
})
let trigger = ref<boolean>(false);
const onPulling = () => {
    if (!trigger.value) {
        trigger.value = true;
        setTimeout(() => {
            trigger.value = false;
            emit('pullLoad', props.currentIndex);
            uni.showToast({ icon: 'none', title: '刷新成功' })
        }, 1000)
    }
}
const tabWidth = computed(() => {
    //用户传入宽度就用传入的宽度百分比，没有就平分
    return props.width ? props.width : 100 / props.tabBars.length;
});
//注册事件
const emit = defineEmits(['changeIndex', 'changeTab', 'pullLoad']);
//swiper滑动事件
const changeIndex = (index: number) => {
    emit('changeIndex', index);
}
//tab点击事件
const changeTab = (e: any) => {
    emit('changeTab', e.detail.current);
}

</script>
<style scoped lang="scss">
.tab {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ddd;
    background-color: #fff;

    align-items: center;

    &-scroll {
        white-space: nowrap;

        .tab-container {
            width: 33%;
            display: inline-block;
            text-align: center;
            padding: 10rpx 0;
            font-size: 34rpx;
            font-weight: 800;
            color: #999;

            .tab-item {
                width: 70%;
                display: inline-block;
                text-align: center;
                padding: 10rpx 0;
                font-size: 34rpx;
                font-weight: 800;
                color: #999;
            }

        }

        .active {
            color: $color-main;
            border-bottom: 5rpx solid $color-main;
        }
    }

    &-tool {
        margin-right: 30rpx;

        &-item {
            color: $color-main;
            font-size: 50rpx;
        }

    }

}
</style>
